<template>
    <div>
      <el-card>
        <el-form
          :model="form"
          label-position="right"
          ref="formRef"
          :rules="formRules"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="编号">
                <el-input
                  v-model="form.number"
                  placeholder="不输入则自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="客户名称" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="采购合同编号" required>
                <el-input v-model="form.forShort"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="公司地址" required>
                <el-input v-model="form.corpAddress" type="textarea" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="公司电话" prop="corpPhone">
                <el-input v-model="form.corpPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="传真">
                <el-input v-model="form.corpFax"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="付款方式">
                <el-input v-model="form.payMethod"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="状态" prop="status">
                <el-switch
                  v-model="form.status"
                  size="large"
                  inline-prompt
                  :active-icon="Check"
                  :inactive-icon="Close"
                  active-value="normal"
                  inactive-value="disable"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="button-position">
        <el-button @click="updateVisible">取 消</el-button>
        <el-button type="primary" @click="updateSupplier(formRef)">确 定</el-button>
      </div>
      </el-card>
  

    </div>
  </template>
    
    <script setup>
  import { reactive, ref, onMounted } from "vue";
  import { ElNotification } from "element-plus";
  import Api from "@/api/model/crm";
  import sysApi from "@/api/model/system";
  import tsSelect from "@/components/scSelect/index.vue";
  import tsFormCard from "@/components/tsFormCard/index.vue";
  import { deepClone } from "@/utils/arr";
  const emit = defineEmits(["updatetable"]);
  const props = defineProps({
    paramsData: {
      type: Object,
      defalut: {},
    },
  });
  
  // 添加用户数据的对象
  const form = ref({});
  const configData = ref([]);
  const formRef = ref();
  const formRules = reactive({});
  
  onMounted(() => {
    getInit();
  });
  const getInit = async () => {
    let res = await Api.supplier.detail.post(props.paramsData);
    if (res.code == "200") {
      configData.value = res.configData;
      form.value = res.data;
    }
  };
  
  const updateVisible = (val) => {
    emit("updatetable");
  };
  const updateSupplier = async (formRef) => {
    await formRef.validate((valid, fields) => {
      if (valid) {
        updateSupplierData();
      }
    });
  };
  
  const updateSupplierData = async () => {
    var params = {
      bean: form.value,
    };
    var res = await Api.supplier.update.post(params);
    if (res.code == 200) {
      ElNotification.success({
        title: "",
        message: "修改成功！",
        duration: 2000,
      });
      emit("updatetable", true);
    }
  };
  </script>
    <style lang="less" scoped>
  :deep(.el-card__header) {
    padding: 10px !important;
    line-height: 22px;
    font-size: 16px;
    height: 45px;
    background: #f6f6f6;
  }
  
  .float-right {
    float: right;
  }
  </style>
    
    
    
    